<template>
    <div id='HGCRSmoitor'>
        <div id='after' class="map"></div>
        <div id='before' class="map"></div>
    </div>
</template>
<script>
   //------------------------------------------------------MapBox引用----------------------------------------------------
    import '../../assets/mapbox/mapbox-gl.css'
    import mapboxgl from '../../assets/mapbox/mapbox-gl.js'
    import '../../assets/mapbox/iclient9-mapboxgl.js'
    import '../../assets/mapbox/libs/draw/mapbox-gl-draw.css'
    import MapboxDraw from '../../assets/mapbox/libs/draw/mapbox-gl-draw.js'
    import '../../assets/mapbox/mapbox-gl-compare.css'
    import '../../assets/mapbox/mapbox-gl-compare.js'

    export default {
        name: 'HGCRSmoitor',
        data () {
            return {
                map:null,
                points:null,
                lines:null,
                tempLines:null
            }
        },
        mounted:function() {
            this.InitCompareMap();
        },

        methods:{
            InitCompareMap:()=>{
                let beforeMap = new mapboxgl.Map({
                    container: 'before', // container id
                    style: {
                        "version": 8,
                        "sources": {
                            "raster-tiles": {
                                "type": "raster",
                                "tileSize": 256,
                                //xyz形式，原生支持
                                "tiles": ['http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}']
                            }
                        },

                        "layers": [{
                            "id": "before",
                            "type": "raster",
                            "source": "raster-tiles",
                            "minzoom": 0,
                            "maxzoom": 22
                        }]
                    },
                    units:'degree',
                    crs:'EPSG:4490',
                    center:[128.0200,47.12197],
                    zoom: 5
                });

                let afterMap = new mapboxgl.Map({
                    container: 'after', // container id
                    style: {
                        "version": 8,
                        "sources": {
                            "raster-tiles": {
                                "type": "raster",
                                "tileSize": 256,
                                //xyz形式，原生支持
                                "tiles": ['http://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}']
                            }
                        },

                        "layers": [{
                            "id": "after",
                            "type": "raster",
                            "source": "raster-tiles",
                            "minzoom": 0,
                            "maxzoom": 22
                        }]
                    },
                    units:'degree',
                    crs:'EPSG:4490',
                    center:[128.0200,47.12197],
                    zoom: 5
                });

                let map = new mapboxgl.Compare(afterMap,beforeMap,{

                });
            },
        },
    }
</script>
<style>
    #HGCRSmoitor{
        width: 100%;
        height: 100%;
    }
    #HGCRSmoitor .map{
        position: absolute;
        width: 100%;
        height: 100%;
    }
</style>


